<template>
  <nav v-if="tocList.length" class="toc-container">
    <ul>
      <li
        v-for="item in tocList"
        :key="item.id"
        :class="[`level-${item.level}`, { active: activeId === item.id }]"
      >
        <a href="javascript:;" class="toc-item" @click="$emit('click-item', item.id)">
          {{ item.text }}
        </a>
      </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
const props = defineProps<{
  tocList: { id: string; text: string; level: number }[]
  activeId: string | null
}>()
const emits = defineEmits<{
  (e: 'click-item', id: string): void
}>()
</script>

<style scoped>
.toc-container {
  max-height: 600px;
  padding-top: 16px;
  overflow-y: auto;
  font-size: 14px;
  user-select: none;
}
@media (max-width: 1023px) {
  .toc-container {
    max-height: none;
    height: 100vh; /* 移动端撑满视口高度 */
  }
}
.toc-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-container li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 10px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.toc-container li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: transparent;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

.toc-container li[class*='level-1'] {
  font-weight: 700;
}
.toc-container li[class*='level-2'] {
  padding-left: 20px;
  font-weight: 600;
}
.toc-container li[class*='level-3'] {
  padding-left: 30px;
  font-weight: 500;
}
.toc-container li[class*='level-4'] {
  padding-left: 40px;
  font-weight: 400;
  font-style: italic;
}
.toc-container li[class*='level-5'] {
  padding-left: 50px;
  font-weight: 400;
  font-style: italic;
}
.toc-container li[class*='level-6'] {
  padding-left: 60px;
  font-weight: 300;
  font-style: italic;
}

.toc-container a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-container a:hover {
  text-decoration: underline;
  color: var(--el-link-hover-color, #66b1ff);
}

.toc-container li.active {
  color: var(--el-primary-color, #409eff);
  font-weight: 700;
}

.toc-container li.active::before {
  background-color: var(--el-primary-color, #409eff);
}

:deep(body.dark) .toc-container {
  color: #ccc;
  box-shadow: inset -4px 0 8px -6px rgba(255, 255, 255, 0.1);
}

:deep(body.dark) .toc-container a:hover {
  color: #99caff;
}

:deep(body.dark) .toc-container li.active {
  color: #66aaff;
}

:deep(body.dark) .toc-container li.active::before {
  background-color: #66aaff;
}
</style>
